<template>
  <div class="month-month">
    <div class="nei">
      <div><el-page-header @back="goback" content=""></el-page-header></div>
      <div>
        <el-form ref="form" label-position="left" label-width="40px">
            <el-row :gutter="20">
                <el-col :span="5">
                  <el-form-item label="企业">
                    <FilterSelect2
                        v-model="formdata.companyId"
                        :optionlist="xitonglist"
                        :valuekey="{ name: 'name', value: 'id' }"
                      ></FilterSelect2>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="部门">
                    <el-select v-model="formdata.departmentId" clearable  style="width:100%" placeholder="请选择" size="small" @change="changebu">
                      <el-option
                        v-for="item in bumenlist"
                        :key="item.departmentId"
                        :label="item.departmentName"
                        :value="item.departmentId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="班组">
                    <el-select v-model="formdata.teamId" clearable  style="width:100%" placeholder="请选择" size="small">
                      <el-option
                        v-for="item in banzulist"
                        :key="item.teamId"
                        :label="item.teamName"
                        :value="item.teamId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="日期">
                        <el-date-picker
                          size="small"
                          v-model="formdata.value1"
                          format="yyyy-MM-dd"
                          value-format="yyyyMMdd"
                          style="width:100%"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="4" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small" @click="chongzhi">重 置</el-button>
                    <el-button size="small" type="primary" @click="getlist">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <TopTitle @command="command" @daochu="daochu" @shuaxin="getlist" >
        <template #leftother>
          <div>
            日超额预警
          </div>
        </template>
      </TopTitle>
      <div class="table">
        <TableColumn
          :issize="iissize"
          ref="tabledataref"
          :tableData="tableData"
          :tableConfig="tableConfig"
        >
          <el-table-column label="是否超额" min-width="100">
            <template #default="{ row }">
              <div :style="{color:row.excessFlag?'red':'green'}">
                {{row.excessFlag?'是':'否'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="100">
            <template #default="{ row }">
              <div>
                <el-link type="primary" :underline="false" @click="toreport(row)" class="link">小时超额情况</el-link>
              </div>
            </template>
          </el-table-column>
        </TableColumn>
      </div>
      <div class="fenye">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="getlist"
            :page-size="15"
            :total="total"
          >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import TableColumn from '@/components/Table/index.vue'
import dayjs from 'dayjs'
import { getCompanyListApi } from '@/api/energy-consumption/Equipment-energy/Energy-analysis'
import TopTooltip from '@/components/TopTitle/newtitle.vue'
import { exportexcel } from '@/utils/excel'
import {getTeamListapi,getDayTeamapi} from '@/api/energy-consumption/demand/limit-warning'
export default {
  name: 'CallPoliceMonthMonth',
  components: {
    TopTooltip,
    TableColumn
  },
  data() {
    return {
      pageNo:0,
      total:0,
      formdata:{},
      iissize: 'medium',
      xitonglist:[],
      tableData:[],
      tableConfig:[
        { label: '序号', type: 'index', width: '100', center: 'center' },
        { label: '企业', prop: 'companyName' },
        { label: '部门', prop: 'departmentName' },
        { label: '班组', prop: 'teamName' },
        { label: '日期', prop: 'dayDate' },
        { label: '预算电量(kWh)', prop: 'budgetEnergy' },
        { label: '实际电量(kWh)', prop: 'actualEnergy' },
        { label: '差额', prop: 'surplus' },
      ],
      bumenlist:[],
      banzulist:[]
    };
  },

  async mounted() {
    const {data:{list}}=await getCompanyListApi()
    this.xitonglist=list
    const {yearMonth,...serializedRow} = this.$route.params
    const {data:{list:array}}=await getTeamListapi({companyId:serializedRow.companyId})
    this.bumenlist=array
    this.changebu(serializedRow.departmentId)
    this.formdata={...serializedRow,value1:[yearMonth+'01',yearMonth+dayjs().format('DD')]}
    this.getlist()
  },

  methods: {
    // 获取表格数据
    async getlist(){
      this.$refs.tabledataref.loading=true
      const pageNo=this.pageNo-1
      const {companyId,teamId,departmentId,value1,yearMonth} =this.formdata
      const {data:{list,totalCount}}=await getDayTeamapi({
        pageNo,pageSize:15,companyId,
        dayDateStart:value1[0],dayDateEnd:value1[1],
        teamId,departmentId
      })
      this.total=totalCount
      this.tableData=list
      this.$refs.tabledataref.loading=false
    },
    // 去小时报
    toreport(row){
      const serializedRow = this.$route.params
      this.formdata={...serializedRow,dayDate:''}
      this.$router.push({
        name: 'month-hour',
        params: { ...row,
          backParams: this.formdata
        } 
      })
    },
    // 返回月报
    goback(){
      const backParams = this.$route.params.backParams;
      this.$router.push({
        name: 'month-month',
        params: backParams
      })
    },
    // 部门下拉
    changebu(val){
      this.$set(this.formdata,'teamId','')
      this.banzulist=this.bumenlist.find(ele=>ele.departmentId==val)?.teamVOList
    },
    // 导出
    daochu(){
      const pageNo=this.pageNo-1
      const {companyId,teamId,departmentId,value1,yearMonth} =this.formdata
      exportexcel(
        '/ecm-microservice-biz/ecm/pre/actual/management/month/team/day/exportExcel',
        {
          pageNo,pageSize:15,companyId,
          dayDateStart:value1[0],dayDateEnd:value1[1],
          teamId,departmentId
        },'日班组超额预警'
      )
    },
    // 重置
    chongzhi(){
      const serializedRow = this.$route.params
      this.changebu(serializedRow.departmentId)
      this.formdata={...serializedRow,dayDate:''}
      this.getlist()
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
  },
};
</script>
<style lang="scss" scoped>
.month-month{
  padding: 10px;
  height: 100%;
  .nei{
    background-color: #fff;
    padding: 20px;
    height: 100%;
    .table{
      height: 78%;
    }
    .fenye{
       text-align: right;
       margin-top: 10px;
    }
  }
}
</style>